<template>
	<div id='navs_header'>
		<!-- 首页顶部图片 -->
		<div class='nav_top_images'>
			<img :src="thisImgSrc" class='change_img' :class='{fadeIn: isFadeIn , fadeOut: isFadeOut}' alt="加载中...">
		</div>

		<!-- 右侧文字介绍 -->
		<div class='right_describe'>
			<div class='hover_left_right_btn'>
				<!-- Left -->
				<div class='l_r_b'>
					<span>&lt;</span>
				</div>
				<!-- Right -->
				<div class='l_r_b'>
					<span>&gt;</span>
				</div>
			</div>
<!--
			<audio controls>
  				<source src="../../assets/music/ThinkAgain.mp3" type="audio/ogg">
			</audio>
-->
			<h1 class='title'>朱朝阳的个人主页</h1>
			<p class='sub'>
				我！朱朝阳。这就是我的个人网站，在这里，您能更加清楚的了解我！还能查看我编写的所有博文！
			</p>
			<!-- 按钮 -->
			<a class='describe_btn' href="#page1">Discover Me</a>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'navs',
		data() {
			return {
				//	当前图片地址
				thisImgSrc: require('../../assets/navImg/slide_1.jpg'),
				// 当前图片数组合集
				threeImg: [
					require('../../assets/navImg/slide_1.jpg'),
					require('../../assets/navImg/slide_2.jpg'),
					require('../../assets/navImg/slide_3.jpg')
				],
				// Img动画控制
				isFadeIn: true,
				isFadeOut: false
			}
		},
		mounted() {
			this.changeBindImgs();
			this.changeBindAnim();
		},
		methods: {
			// 	动态绑定页面中的图片
			changeBindImgs: function() {
				var that = this;
				var thisIndex = 0;
				var interval = setInterval(function() {
					that.thisImgSrc = that.threeImg[(thisIndex++) % 3];
				}, 16000)
			},

			// 动态修改动画样式
			changeBindAnim: function() {
				var that = this;
				var timerAnim = setInterval(function() {
					that.isFadeIn = !that.isFadeIn;
					that.isFadeOut = !that.isFadeOut;
				}, 8000)
			}

		}
	}

</script>
<style scoped="true">
	#navs_header {
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.nav_top_images {
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: absolute;
	}

	.fadeOut {
		transition: all 5s;
		transform: scale(1.1);
	}

	.fadeIn {
		transition: all 5s;
		transform: scale(1.0);
	}

	/* 右侧的文字介绍 */
	.right_describe {
		top: 50px;
		right: 60px;
		width: 520px;
		height: 500px;
		text-align: right;
		position: absolute;
	}

	/* 左右两个按钮 */
	.hover_left_right_btn {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-bottom: 40px;
	}

	.l_r_b {
		width: 50px;
		height: 50px;
		opacity: 0.6;
		line-height: 50px;
		text-align: center;
		font-size: 30px;
		font-weight: bolder;
		background-color: black;
		margin-left: 10px;
	}

	.l_r_b span {
		color: #FFFFFF;
	}

	.title {
		margin-top: 140px;
		margin-bottom: 30px;
		font-size: 48px;
		color: #fff;
		font-weight: 700;
	}

	.sub {
		font-size: 15px;
		color: #fff;
		line-height: 24px;
		margin-bottom: 30px;
	}

	.describe_btn {
		height: 44px;
		color: #45489a;
		font-size: 13px;
		font-weight: 600;
		line-height: 44px;
		padding: 0px 25px;
		transition: all 0.3s;
		display: inline-block;
		text-decoration: none;
		letter-spacing: 0.25px;
		background-color: #fff;
		text-transform: capitalize;
	}

	.describe_btn:hover {
		color: #FFFFFF;
		background-color: #45489a;
	}

</style>
